<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 黑体;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 300px;
        float: left;
    }

    .relative {
        position: relative;
        top: 150px;
    }

    .absolute {
        position: absolute;
        top: 150px;
    }

    .bg {
        background-color: rgba(100, 100, 100, .5);
    }
    </style>
</head>

<body>
    <div>
        <h2>正常信息流</h2>
        <p>我打江南走过，那等在季节里的容颜如莲花的开落</p>
        <p>东风不来，三月的柳絮不飞</p>
        <p class="bg">你底心如小小的寂寞的城，恰若青石的街道向晚</p>
        <p>跫音不响，三月的春帷不揭</p>
        <p>你底心是小小的窗扉紧掩
           我达达的马蹄是美丽的错误
           我不是归人，是个过客……</p>
    </div>
    <div>
        <h2>相对定位</h2>
        <p>我打江南走过，那等在季节里的容颜如莲花的开落</p>
        <p>东风不来，三月的柳絮不飞</p>
        <p class="bg relative">你底心如小小的寂寞的城，恰若青石的街道向晚</p>
        <p>跫音不响，三月的春帷不揭</p>
        <p>你底心是小小的窗扉紧掩
           我达达的马蹄是美丽的错误
           我不是归人，是个过客……</p>
        <code>.relative { position: relative; top:150px;}</code>
    </div>
    <div>
        <h2>绝对定位</h2>
        <p>我打江南走过，那等在季节里的容颜如莲花的开落</p>
        <p>东风不来，三月的柳絮不飞</p>
        <p class="bg absolute">你底心如小小的寂寞的城，恰若青石的街道向晚</p>
        <p>跫音不响，三月的春帷不揭</p>
        <p>你底心是小小的窗扉紧掩
           我达达的马蹄是美丽的错误
           我不是归人，是个过客……</p>
        <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
    </div>
</body>

</html>